import React from "react";
import PropTypes from "prop-types";
import {Image, StyleSheet, Text, TouchableOpacity, View} from "react-native";
import chjStyle from "../../CustomStyle";
import {Actions} from "react-native-router-flux";
import CustomStyle from "../../../common/style/CustomStyle.js";


export default class ModuleCommonHeader extends React.Component {
    static propTypes = {
        title: PropTypes.string,
        clickLeft: PropTypes.func,
        LeftView: PropTypes.any,
        clickedRight: PropTypes.func,
        rightView: PropTypes.any,
        rightText: PropTypes.string,
    };
    static defaultProps = {
        clickLeft: () => {
            Actions.pop()
        },
        LeftView: <Image source={require('../../../img/header_back.png')} style={{
            width: CustomStyle.getActualSizeInHorizontal(18),
            height: CustomStyle.getActualSizeInVertical(32),
        }}/>
    };

    // 构造函数，可执行初始化操作
    constructor(props) {
        super(props);
        // 在ES6，在构造函数里初始化state
        this.state = {};
    }

    // 组件被加载时
    componentDidMount() {

    }

    // 组件即将被卸载时
    componentWillUnmount() {
    }

    _renderRight() {
        if (this.props.rightView) {
            return this.props.rightView;
        } else {
            return <Text
                style={[CustomStyle.baseText, {
                    fontSize: CustomStyle.getActualFontSize(28),
                    color: 'white',
                }]}>{this.props.rightText}</Text>
        }
    }

    // 组件被渲染时
    render() {
        console.log('title ' + this.props.title);
        return (
            <View style={
                [chjStyle.headerContainer]
            }>
                <View style={[chjStyle.headerContainer, styles.headerStyle, {
                    position: 'absolute',
                }]}>
                    <Text style={[chjStyle.baseText, chjStyle.headerTitle]}>{this.props.title}</Text>
                </View>

                <View style={[chjStyle.headerContainer, styles.headerStyle, {backgroundColor: '#00000000'}]}>
                    <TouchableOpacity
                        style={[, {
                            backgroundColor: 'rgba(0, 0, 0, 0)',
                            height: CustomStyle.getActualSizeInVertical(48),
                            width: CustomStyle.getActualSizeInHorizontal(48),
                        }]}
                        onPress={() => {
                            this.props.clickLeft();
                        }}>
                        {this.props.LeftView}
                    </TouchableOpacity>

                    <TouchableOpacity
                        style={{backgroundColor: 'rgba(0, 0, 0, 0)'}}
                        onPress={this.props.clickedRight}>
                        {this._renderRight()}
                    </TouchableOpacity>
                </View>

            </View>

        );
    }
}
const styles = StyleSheet.create({
    headerStyle: {
        paddingTop: CustomStyle.navBasePaddingTop,
        paddingLeft: CustomStyle.getActualSizeInHorizontal(30),
        paddingRight: CustomStyle.getActualSizeInHorizontal(30),
        justifyContent: 'space-between',
    },
});
